Dual Axes Chart

Plots two different variables on separate axes, allowing for comparison and analysis of their trends. This is useful for visualizing the relationship between two variables that have different scales or units, or for comparing trends over time with different metrics.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  const ColumnField = "Year";
  const RowField1 = "Miles_per_Gallon";
  const RowField2 = "Horsepower";
  const ColorField = "Origin";

  muze
    .canvas()
    .columns([ColumnField])
    .rows([[RowField1], [RowField2]])
    .layers([
      {
        mark: "bar",
        encoding: {
          y: RowField1,
          color: ColorField,
        },
      },
      {
        mark: "line",
        encoding: {
          y: RowField2,
          color: {
            value: () => "#80B1D3",
          },
        },
      },
    ])
    .data(data)
    .mount("#chart"); // mount your chart